<template>
  <div>
    <!-- show-checkbox 节点是否可被选择 -->
    <!-- default-expand-all 默认展开的节点的 key 的数组 -->
    <!-- check-strictly  在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false -->
    <el-tree 
    ref="tree"
    node-key="id"
    :data="treeList" 
    show-checkbox 
    default-expand-all 
    :props="{label:'name'}" />
    <div style="margin-top: 20px; text-align: right">
      <el-button type="primary" @click="hAssignPer">确定</el-button>
      <el-button @click="hCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getPermissionList } from "@/api/permisson";
import { tranDataToTree } from "@/utils";
import {getRolesDetail,assignPerm} from "@/api/setting"
export default {
  props: {
    id: {
        type:String,
        required:true
    }
  },
  data() {
    return {
      treeList: []
    };
  },
  created() {
    this.loadPermissionList();
  },
  methods: {
    // 给角色分配权限
    async hAssignPer(){
        try {
            // 获取选中的权限点
            const permIds=this.$refs.tree.getCheckedKeys()
            console.log('permIds',permIds);
            await assignPerm({id:this.id, permIds:permIds})
            this.$emit('close')
        } catch (error) {
            console.log('error',error);
        }
    },
    async loadPermissionList() {
      try {
        const res = await getPermissionList();
        console.log("getPermissionList", res);
        this.treeList = tranDataToTree(res.data);

        // 获取当前角色的权限点
        const info= await getRolesDetail(this.id)

        // 让当前角色拥有的权限 处于选中状态
        this.$refs.tree.setCheckedKeys(info.data.permIds)
        console.log('info',info);
      } catch (error) {
        console.log(error);
      }
    },
    hCancel() {
      this.$emit("close");
    }
  }
};
</script>

<style scoped>
</style>